<template>
  <div class="goods-container">

    <bread></bread>

    <!-- 卡片 -->
    <el-card class="box-card">
      <div class="searchBox">
        <el-input placeholder="请输入内容"
                  v-model="searchVal"
                  class="input-with-select">
          <el-button @click.native="getUsers"
                     slot="append"
                     icon="el-icon-search"></el-button>

        </el-input>
      </div>

      <!-- 表格 -->
      <el-table border
                :stripe="true"
                :data="tableData"
                style="width: 100%">
        <el-table-column type="index"
                         label="#"
                         width="50">
        </el-table-column>
        <el-table-column prop="order_number"
                         label="订单编号"
                         width="345">
        </el-table-column>
        <el-table-column prop="order_price"
                         label="订单价格"
                         width="210">
        </el-table-column>
        <el-table-column prop="is_send"
                         label="是否付款"
                         width="210">

        </el-table-column>
        <el-table-column prop="is_send"
                         label="是否发货"
                         width="210">
        </el-table-column>
        <el-table-column prop="update_time"
                         label="下单时间"
                         width="210">
        </el-table-column>
        <el-table-column prop="address"
                         label="操作"
                         width="120">
          <!-- 编辑 按钮-->
          <el-button type="primary"
                     size="small"
                     @click="dialogFormVisible = true"
                     icon="el-icon-edit"></el-button>

          <!-- 修改地址 按钮 -->
          <el-button type="success"
                     size="small"
                     @click="dialogFormVisible2 = true"
                     icon="el-icon-location-outline"></el-button>

        </el-table-column>
      </el-table>
      <!-- 表格 -->

      <!-- 分页组件 -->
      <el-pagination style="margin-top:20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paramsObj.pagenum"
                     :page-sizes="[10, 15, 20, 25]"
                     :page-size="paramsObj.pagesize"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

      <!-- 编辑按钮-弹出层 -->
      <el-dialog title="修改地址"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form"
                 :rules="rules">
          <el-form-item label="省市区/县"
                        :label-width="formLabelWidth">
            <el-select v-model="form.region"
                       placeholder="请选择">
              <el-option label="区域一"
                         value="shanghai"></el-option>
              <el-option label="区域二"
                         value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="详细地址"
                        prop="name"
                        :label-width="formLabelWidth">
            <el-input v-model="form.name"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改地区弹出层-->
      <el-dialog title="修改地址"
                 :visible.sync="dialogFormVisible2">
        <el-form :model="form"
                 :rules="rules">
          <!-- 时间线 -->
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </div>

        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogFormVisible2 = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
     
  </div>
</template>
           
<script>
import { OrdersApi } from '../api';
import moment from 'moment'
export default {
  name: '',
  data () {
    return {
      //分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,


      //点击搜索按钮进行=查找
      paramsObj: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      //表格数据
      searchVal: '',
      tableData: [],

      //编辑弹出层的校验规则 rules
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
      },
      //时间线-物流信息
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'success',
        icon: 'el-icon-location'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-08 20:46',
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-05 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-02 20:46'
      }],

      //对话框
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',


    }
  },
  created () {
    this.getUsers()
  },

  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.paramsObj.pagesize = val
      this.getUsers() //重新根据页面获取数据
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.paramsObj.pagenum = val
      this.getUsers() //重新根据页面获取数据
    },
    async getUsers () {
      const res = await OrdersApi(this.paramsObj)
      console.log(res, 69696);
      // 转换时间格式	
      res.data.data.goods.forEach(item => item.update_time = moment(item.update_time).format('YYYY-MM-DD hh:mm:ss'))
      console.log(res.data.data.goods);
      this.tableData = res.data.data.goods;
      // 获取总条数
      this.total = res.data.data.total


    },
  },
}
</script>
<style lang='less'  scoped>
.goods-container {
  .box-card {
    .searchBox {
      margin: 15px 0 20px;
      display: flex;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }

    .el-pagination {
      text-align: left;
    }
  }
}
</style>
